<template>
  <div class="footer">
    <div class="footer-top">
      <ul class="footer-top-list">
        <li class="footer-duo">
          <i></i>
          品类齐全，轻松购物
        </li>
        <li class="footer-kua">
          <i></i>
          多仓直发，极速配送
        </li>
        <li class="footer-hao">
          <i></i>
          正品行货，精致服务
        </li>
        <li class="footer-shen">
          <i></i>
          天天低价，畅选无忧
        </li>
      </ul>
    </div>
    <div class="footer-middle">
      <div class="footer-middle-list">
        <dl>
          <dt>购物指南</dt>
          <dd>购物流程</dd>
          <dd>会员介绍</dd>
          <dd>生活旅行/团购</dd>
          <dd>常见问题</dd>
        </dl>
        <dl>
          <dt>配送方式</dt>
          <dd>上门自提</dd>
          <dd>211限时达</dd>
          <dd>配送服务查询</dd>
          <dd>配送费收取标准</dd>
        </dl>
        <dl>
          <dt>支付方式</dt>
          <dd>货到付款</dd>
          <dd>在线支付</dd>
          <dd>分期付款</dd>
          <dd>公司转账</dd>
        </dl>
        <dl>
          <dt>售后服务</dt>
          <dd>售后政策</dd>
          <dd>价格保护</dd>
          <dd>退款说明</dd>
          <dd>返修/退换货</dd>
          <dd>取消订单</dd>
        </dl>
      </div>
    </div>
    <div class="footer-bottom">
      <ul class="footer-bottom-list">
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>合作招商</li>
        <li>商家帮助</li>
        <li>营销中心</li>
        <li>手机京东</li>
        <li>合作招商</li>
        <li>友情链接</li>
        <li>销售联盟</li>
        <li>京东社区</li>
        <li>合作招商</li>
        <li>风险监测</li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts"></script>

<style scoped lang="scss">
.footer {
  .footer-top {
    max-width: 74.375rem;
    width: 100%;
    margin: 0 auto;

    .footer-top-list {
      display: flex;
      justify-content: space-between;
      gap: 5rem;
      padding: 1.875rem 0;

      // 定义混合宏
      @mixin footer-top-icon($position) {
        position: relative;
        width: 224px;
        height: 42px;
        line-height: 42px;
        font-size: 18px;
        font-weight: 700;
        text-indent: 46px;
        color: #444;
        overflow: hidden;
        i {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 36px;
          height: 42px;
          text-indent: -9999px;
          background-image: url(@/assets/images/footer.png);
          background-repeat: no-repeat;
          background-position: 0 $position;
        }
      }

      // 应用混合宏
      .footer-duo {
        @include footer-top-icon(0);
      }

      .footer-kua {
        @include footer-top-icon(-2.6875rem);
      }

      .footer-hao {
        @include footer-top-icon(-5.375rem);
      }

      .footer-shen {
        @include footer-top-icon(-8.0625rem);
      }
    }
  }

  .footer-middle {
    border-top: solid 1px #dedede;
    border-bottom: solid 1px #dedede;
    padding: 1rem 0;

    .footer-middle-list {
      display: flex;
      justify-content: space-between;
      max-width: 74.375rem;
      width: 100%;
      margin: 0 auto;

      dt {
        padding-bottom: 0.375rem;
        font-weight: 700;
        font-size: 0.875rem;
        color: #777;
        height: 1.375rem;
      }

      dd {
        font-size: 0.75rem;
        color: #666;
        height: 1.375rem;
        overflow: hidden;
      }
    }
  }

  .footer-bottom {
    padding: 1rem 0;

    .footer-bottom-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 74.375rem;
      width: 100%;
      margin: 0 auto;
      font-size: 0.75rem;
      color: #666;

      li {
        display: flex;
        align-items: center;

        &:not(:first-child)::before {
          content: '|';
          margin: 0 0.7rem;
          color: #ccc;
          font-size: 0.75rem;
        }
      }
    }
  }
}
</style>
